<template>
    <div class="content">
        <div class="top">
            <ul>
                <li>
                    <SelectIpt :lists="equipmentSelect" ref="equipment">
                        <p>所属厂商</p>
                    </SelectIpt>
                </li>
                <li>
                    <SelectIpt :lists="areaSelect" ref="area">
                        <p>区域</p>
                    </SelectIpt>
                </li>
                <li>
                    <TextIpt ref="doorAccess">
                        <p>门禁名称</p>
                    </TextIpt>
                </li>
                <li>
                    <TextIpt ref="equipmentID">
                        <p>设备ID</p>
                    </TextIpt>
                </li>
            </ul>
            <div class="btn">
                <GreenBtn @click.native="query">
                    查询
                </GreenBtn>
                <BlueBtn @click.native="add">
                    新增
                </BlueBtn>
                <BlueBtn @click.native="allPassword">
                    批量设置密码
                </BlueBtn>
                <!-- <BlueBtn>
                    疫情审核配制
                </BlueBtn> -->
            </div>
        </div>
        <div class="table">
            <el-table :data="filterEquipment.slice(pages, pages + 10)" border style="width: 100%">
                <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop"
                    :label="column.label" :width="column.width || null">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="editEquipment(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" @click="setPassword(scope.$index, scope.row)">设置密码</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <div class="total-page">
                    <p>共<span>{{ Math.ceil(filterEquipment.length / 10) }}</span>页/<span>{{ filterEquipment.length
                            }}</span>条数据
                    </p>
                </div>
                <el-pagination background layout="prev, pager, next,jumper" @current-change="getPage" :page-size=10
                    :current-page.sync=page :total="filterEquipment.length" hide-on-single-page>
                </el-pagination>
            </div>
        </div>
        <!-- 点击新增 -->
        <el-dialog title="新增" :visible.sync="addDialog" width="28%" :before-close="addClose" class="dialog">
            <el-form ref="addForm" :model="addForm" label-width="80px" :rules="rules">
                <!-- <el-form-item label="设备名称" prop="accessControl">
                    <el-input v-model="addForm.accessControl"></el-input>
                </el-form-item> -->
                <el-form-item label="设备ID" prop="equipmentID">
                    <el-input v-model="addForm.equipmentID"></el-input>
                </el-form-item>
                <el-form-item label="厂商名称" prop="equipmentName">
                    <el-input v-model="addForm.equipmentName"></el-input>
                </el-form-item>
                <el-form-item label="出入类型" prop="type">
                    <el-select v-model="addForm.type" placeholder="请选择出入类型">
                        <el-option value="出"></el-option>
                        <el-option value="进"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="SIM门禁" prop="type">
                    <el-select v-model="addForm.simState" placeholder="请选择SIM门禁状态">
                        <el-option value="支持"></el-option>
                        <el-option value="不支持"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区域" prop="area">
                    <el-select v-model="addForm.area" placeholder="请选择区域">
                        <el-option value="公共区域"></el-option>
                        <el-option value="楼栋区域"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="楼栋" prop="build" v-if="addForm.area == '楼栋区域'">
                    <el-input v-model="addForm.build"></el-input>
                </el-form-item>
                <el-form-item label="单元" prop="unit" v-if="addForm.area == '楼栋区域'">
                    <el-input v-model="addForm.unit"></el-input>
                </el-form-item>
                <el-form-item label="位置" prop="location" v-if="addForm.area == '公共区域'">
                    <el-input v-model="addForm.location"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addClose">取 消</el-button>
                <el-button type="primary" @click="addConfirm">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 点击编辑 -->
        <el-dialog title="编辑" :visible.sync="editDialog" width="28%" :before-close="editClose" class="dialog">
            <el-form ref="editForm" :model="editForm" label-width="80px" :rules="rules">
                <!-- <el-form-item label="设备名称" prop="accessControl">
                    <el-input v-model="editForm.accessControl"></el-input>
                </el-form-item> -->
                <el-form-item label="设备ID" prop="equipmentID">
                    <el-input v-model="editForm.equipmentID"></el-input>
                </el-form-item>
                <el-form-item label="厂商名称" prop="equipmentName">
                    <el-input v-model="editForm.equipmentName"></el-input>
                </el-form-item>
                <el-form-item label="出入类型" prop="type">
                    <el-select v-model="editForm.type" placeholder="请选择出入类型">
                        <el-option value="出"></el-option>
                        <el-option value="进"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备状态" prop="type">
                    <el-select v-model="editForm.equipmentState" placeholder="请选择SIM门禁状态">
                        <el-option value="在线"></el-option>
                        <el-option value="离线"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="SIM门禁" prop="type">
                    <el-select v-model="editForm.simState" placeholder="请选择SIM门禁状态">
                        <el-option value="支持"></el-option>
                        <el-option value="不支持"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区域" prop="area">
                    <el-select v-model="editForm.area" placeholder="请选择区域">
                        <el-option value="公共区域"></el-option>
                        <el-option value="楼栋区域"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="楼栋" prop="build" v-if="editForm.area == '楼栋区域'">
                    <el-input v-model="editForm.build"></el-input>
                </el-form-item>
                <el-form-item label="单元" prop="unit" v-if="editForm.area == '楼栋区域'">
                    <el-input v-model="editForm.unit"></el-input>
                </el-form-item>
                <el-form-item label="位置" prop="location" v-if="editForm.area == '公共区域'">
                    <el-input v-model="editForm.location"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editClose">取 消</el-button>
                <el-button type="primary" @click="editConfirm">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 批量设置密码弹窗 -->
        <el-dialog title="批量设置密码" :visible.sync="passwordDialog" width="25%" :before-close="passwordClose">
            <el-form :model="passwordForm" status-icon :rules="passwordRules" ref="passwordForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="passwordForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="passwordForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('passwordForm')">提交</el-button>
                    <el-button @click="resetForm('passwordForm')">重置</el-button>
                </el-form-item>
            </el-form>


        </el-dialog>

    </div>
</template>

<script>
import SelectIpt from '@/components/SelectIpt.vue';
import TextIpt from '@/components/TextIpt.vue';
import GreenBtn from '@/components/GreenBtn.vue';
import BlueBtn from '@/components/BlueBtn.vue';
export default {
    components: {
        BlueBtn,
        GreenBtn,
        SelectIpt,
        TextIpt
    },
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.passwordForm.checkPass !== '') {
                    this.$refs.passwordForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.passwordForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            passwordRules: {
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ]
            },
            passwordForm: {
                pass: '',
                checkPass: '',
                id:""
            },
            passwordDialog: false,
            //编辑
            clickIndex: '',
            editDialog: false,
            editForm: {
                id:"",
                equipmentID: '',
                equipmentName: '',
                type: "",
                area: '',
                build: '',
                unit: '',
                location: '',
                simState: '',
                equipmentState:""

            },
            addForm: {
                equipmentID: '',
                equipmentName: '',
                type: "",
                area: '',
                build: '',
                unit: '',
                location: '',
                simState: ''
            },
            rules: {
                equipmentID: [
                    { required: true, message: '请输入设备ID', trigger: 'change' }
                ],
                equipmentName: [
                    { required: true, message: '请输入厂商名称', trigger: 'change' }
                ],
                type: [
                    { required: true, message: '请选择出入类型', trigger: 'change' }
                ],
                area: [
                    { required: true, message: '请选择区域', trigger: 'change' }
                ],
                build: [
                    { required: true, message: '请输入楼栋', trigger: 'change' }
                ],
                unit: [
                    { required: true, message: '请输入单元', trigger: 'change' }
                ],
                location: [
                    { required: true, message: '请输入位置', trigger: 'change' }
                ],
                simState: [
                    { required: true, message: '请选择SIM门禁状态', trigger: 'change' }
                ],
                equipmentState:[
                    { required: true, message: '请选择设备状态', trigger: 'change' }
                ],
            },
            addDialog: false,
            //查询数组
            equipmentSelect: ['旷视', '海康', '大华', '360', '安恒', '中兴', '萤石', '华为'],
            areaSelect: ['公共区域', '楼栋区域'],
            page: 0,
            pages: 0,
            tableColumns: [
                { prop: 'EquipmentName', label: '厂商名称', width: 150 },
                { prop: 'AccessControl', label: '门禁名称', width: 150 },
                { prop: 'EquipmentID', label: '设备ID', width: 200 },
                { prop: 'EquipmentState', label: '设备状态', width: 150 },
                { prop: 'Type', label: '出入类型', width: 150 },
                { prop: 'SIMState', label: 'SIM门禁状态', width: 140 },
                { prop: 'Area', label: '区域', width: 170 },
                { prop: 'AddDate', label: '添加时间', width: 240 }
            ],
            // 接口的所有数据
            allEquipment: [],
            filterEquipment: [],
        }
    },
    methods: {
        setPassword(index,row){
            this.passwordForm.checkPass=''
            this.passwordForm.pass=''
            this.passwordForm.id=row.ID
            this.passwordDialog=true
        },
        allPassword(){
            this.passwordForm.checkPass=''
            this.passwordForm.pass=''
            this.passwordDialog=true
        },
        editPassword() {
            this.$axios.post('http://127.0.0.1/access/allPassword', {
                ...this.passwordForm
            }, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.$message({
                    message: '修改密码成功',
                    type: 'success'
                });
                this.passwordDialog=false
            }).catch(err => {
                console.log(err);
            })
        },
        submitForm(formName) {
           
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.editPassword()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //编辑
        editEquipmentData() {
            this.$axios.post('http://127.0.0.1/access/editEquipment', {
                ...this.editForm
            }, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
            }).catch(err => {
                console.log(err);
            })
        },
        editEquipment(index, row) {
            this.editDialog = true
            this.editForm.equipmentID = row.EquipmentID
            this.editForm.equipmentName = row.EquipmentName
            this.editForm.type = row.Type
            this.editForm.area = row.Area
            this.editForm.simState = row.SIMState
            this.editForm.equipmentState=row.EquipmentState
            this.clickIndex = index + this.pages
            this.editForm.id=row.ID
            if (row.Area == '公共区域') {
                this.editForm.location = row.AccessControl
            } else {
                this.editForm.build = row.AccessControl.split(' ')[0]
                this.editForm.unit = row.AccessControl.split(' ')[1]
            }
        },
        editConfirm() {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    let flag = false
                    if (this.filterEquipment[this.clickIndex].EquipmentID != this.editForm.equipmentID) {
                        this.filterEquipment[this.clickIndex].EquipmentID = this.editForm.equipmentID
                        flag = true
                    }
                    if (this.filterEquipment[this.clickIndex].EquipmentName != this.editForm.equipmentName) {
                        this.filterEquipment[this.clickIndex].EquipmentName = this.editForm.equipmentName
                        flag = true
                    }
                    if (this.filterEquipment[this.clickIndex].Type != this.editForm.type) {
                        this.filterEquipment[this.clickIndex].Type = this.editForm.type
                        flag = true
                    }
                    if (this.filterEquipment[this.clickIndex].Area != this.editForm.area) {
                        this.filterEquipment[this.clickIndex].Area = this.editForm.area
                        flag = true
                    }
                    if (this.filterEquipment[this.clickIndex].SIMState != this.editForm.simState) {
                        this.filterEquipment[this.clickIndex].SIMState = this.editForm.simState
                        flag = true
                    }
                    
                    if (this.filterEquipment[this.clickIndex].EquipmentState != this.editForm.equipmentState) {
                        this.filterEquipment[this.clickIndex].EquipmentState = this.editForm.equipmentState
                        flag = true
                    }
                    if (this.editForm.area == '楼栋区域') {
                        if (!this.filterEquipment[this.clickIndex].AccessControl.includes(this.editForm.build + ' ' + this.editForm.unit)) {
                            this.filterEquipment[this.clickIndex].AccessControl = this.editForm.build + ' ' + this.editForm.unit
                            flag = true
                        }
                    } else {
                        if (this.filterEquipment[this.clickIndex].AccessControl != this.editForm.location) {
                            this.filterEquipment[this.clickIndex].AccessControl = this.editForm.location
                            flag = true
                        }
                    }

                    if (flag) {
                        this.editEquipmentData()
                    }
                    this.addDialog=false
                } else {
                    return false;
                }
            });
        },
        editClose() {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.editDialog = false
                })
                .catch(_ => { });
        },
        passwordClose() {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.passwordDialog = false
                })
                .catch(_ => { });
        },
        //新增门禁设备
        add() {
            this.addDialog = true
        },
        addEquipment() {
            this.$axios.post('http://127.0.0.1/access/addEquipment', {
                ...this.addForm
            }, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.$message({
                    message: '新增设备成功',
                    type: 'success'
                });
                this.addDialog=false
                this.getAllData()
            }).catch(err => {
                console.log(err);
            })
        },
        addConfirm() {
            this.addEquipment()
            this.$refs.addForm.validate((valid) => {
                if (valid) {

                } else {
                    return false;
                }
            });
        },
        addClose() {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.addDialog = false
                })
                .catch(_ => { });
        },
        //点击查询
        query() {
            this.pages = 0
            this.page = 0
            const serach = {}
            if (this.$refs.equipment.value) {
                serach.equipment = this.$refs.equipment.value
            }
            if (this.$refs.area.value) {
                serach.area = this.$refs.area.value
            }
            if (this.$refs.doorAccess.input) {
                serach.doorAccess = this.$refs.doorAccess.input
            }
            if (this.$refs.equipmentID.input) {
                serach.equipmentID = this.$refs.equipmentID.input
            }
            this.filterEquipment = this.allEquipment.filter(item => {
                if (serach.equipment && item.EquipmentName !== serach.equipment) {
                    return false;
                }
                if (serach.area && item.Area !== serach.area) {
                    return false;
                }
                if (serach.doorAccess && !item.AccessControl.includes(serach.doorAccess)) {
                    return false;
                }
                if (serach.equipmentID && !item.EquipmentID.includes(serach.equipmentID)) {
                    return false;
                }
                return true
            })
        },
        //get 当前页
        getPage(page) {
            this.pages = 10 * (page - 1)
        },
        // 获取所有的接口数据
        getAllData() {
            this.$axios.get('http://127.0.0.1/access/allEquipment', {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.allEquipment = res.data
                this.filterEquipment = res.data
            }).catch(err => {
                console.log(err);
            })
        }
    },
    mounted() {
        this.getAllData()
    }
}
</script>

<style scoped>
.dialog>>>.el-dialog__footer {
    padding: 10px 40px 35px;
}

.dialog>>>.el-dialog__body {
    display: flex;
    justify-content: center;
}

.dialog>>>input {
    width: 217px;
}

.table>>>.el-table {
    min-height: 580px;
}

.page {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
}

.page>>>button {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    background: #fff !important;
}

.page>>>.active {
    border-color: rgba(26, 135, 254, 1) !important;
    background-color: rgba(26, 135, 254, 1) !important;
    color: #fff !important;
}

.page>>>.el-pager li {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    font-size: 12px;
    color: #999;
    font-weight: normal !important;
    background: #fff;
}

.total-page span {
    color: #FF3C2C;
}

.total-page {
    font-size: 12px;
    color: #666;
}

.top li {
    margin-bottom: 20px;
}
</style>